import React, { useEffect } from "react";
import styles from "./index.module.less";
import defaultHead from "@images/sex1.webp";
import SvgIcon from "@components/SvgIcon";
import { profile } from "@depjs/storage";
import { useNavigate } from "react-router-dom";

const InfoCard = (props) => {
    const { setIsShowCard } = props;

    const navigate = useNavigate();

    useEffect(() => {
        document.onclick = function () {
            setIsShowCard(false);
        };
    }, [setIsShowCard]);

    return (
        <div
            className={styles.info_card}
            onClick={(e) => {
                e.stopPropagation();
            }}
        >
            <div className={styles.user_info}>
                <div className={styles.avatar}>
                    <img
                        src={
                            profile?.avatarUrl
                                ? require(`@images/head/${profile.avatarUrl}`)
                                : defaultHead
                        }
                        alt=""
                    />
                </div>
                <div className={styles.info_text}>
                    <div className={styles.uname_wrap}>
                        <p className={styles.uname}>{profile.userName}</p>
                        <div className={styles.user_sex}>
                            <SvgIcon
                                font={
                                    profile.sex === 0
                                        ? "icon-nv-copy"
                                        : profile.sex === 1
                                        ? "icon-nan-copy"
                                        : "icon-xingbietongji-copy"
                                }
                            />
                        </div>
                    </div>
                    <p className={styles.uid}>
                        <span>uid：</span>
                        {profile.uid}
                    </p>
                    <p className={styles.area}>
                        <span>地区：</span>
                        浙江 杭州
                    </p>
                </div>
            </div>
            <div className={styles.mid_line}></div>
            <div
                className={styles.send_btn}
                onClick={() => {
                    navigate(`/web-chat/chat/chat-window/${profile.userName}`);
                    setIsShowCard(false);
                }}
            >
                发消息
            </div>
        </div>
    );
};

export default InfoCard;
